<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 播放器css -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" >
    
</head>
<body>
    <!-- 播放器 -->
    <div class="prism-player" id="J_prismPlayer"></div>
    <!-- 播放器脚本 -->
    <script charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
    <!-- 阿里云视频播放器组件 -->
    <script charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>
    <script>
        /* 弹幕组件集成了 CommentCoreLibrary 框架, 更多 Api 请查看文档 https://github.com/jabbany/CommentCoreLibrary/ */
        var danmukuList = [{
                "mode": 1,
                "text": "哈哈",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "前方高能",
                "stime": 2000,
                "size": 25,
                "color": 0xff0000
            }, {
                "mode": 1,
                "text": "灵魂歌手",
                "stime": 30000,
                "size": 25,
                "color": 0xff0000
            }, {
                "mode": 1,
                "text": "顺手一划",
                "stime": 10000,
                "size": 25,
                "color": 0x00c1de
            }]
        var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            //播放配置
            //播放方式一（非加密——视频播放地址）：支持播放地址播放,此播放优先级最高，此种方式不能播放加密视频
            // source : 'https://outin-8d858fb7e25511eba06300163e1a65b6.oss-cn-shanghai.aliyuncs.com/sv/3eee5334-17a960107f6/3eee5334-17a960107f6.mp4?Expires=1626059854&OSSAccessKeyId=LTAI4FfD63zoqnm6ckiBFfXZ&Signature=xWHVmOD3dEleB2teZrMFWrqcHJw%3D',

            //播放方式二（加密和非加密——视频播放凭证）：加密视频和多数据源视频的播放
            vid : 'c4db930415354b4ca9c70c20353d5530',
            playauth : 'eyJTZWN1cml0eVRva2VuIjoiQ0FJU2h3TjFxNkZ0NUIyeWZTaklyNWY3TE5IQXI2NXQzN3VSUTNIL2xXTTRldTVOdDVUNXVqejJJSGxQZTNGaEFPb2V2L2svbVc5VTdmb2Nsck1xRnNjYkh4T2ZOSlV2c2NzT3ExdjRKcExGc3QySjZyOEpqc1ZWN0xrb3lsbXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRUo4RzJDQ2QvWDRvZ3VTT2xuOUVKTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHpia1ZKaFQyNEtQZFhMbHdSTEE4OFcraVBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZDJ4MkJCT3NuMjJVR29BQmpnUWV4OHgzSjhUNU16YVZJQUxNNWdtcnpGNXFLYWVweVpaWEVjK2x2aUJBQXk1SzlyLzlEYzNHRHJja1luUlJ2eUwzY2lWZnRyRnBlTEVyM3BsWGt2c0c2K0J4T3ZjaGpPZlFWRWNiUW9vR1BVRjhyK08rOVpwKzREYy9YQktJRnk1V1RpZ3IrZ2luemd1SVVwZVFrT3UxRGFvRTVEaVpvY2svWTg3WDJEND0iLCJBdXRoSW5mbyI6IntcIkNJXCI6XCJYR0ZmS0lJOWNqNVJrU0FyWHhDbG9OMEtDSjM0WE5RWmx1RHRoRzFxOXBwMi8wbVdEZlhWb0VpdDZGRk94Y2hkTXZzYVl6aW04UzR1NklLd3IyZnQrUXA2L25OUEVTZjc5TjROVFJkZ3RXbz1cIixcIkNhbGxlclwiOlwiQ2FOZ1FmOFlMbG5lUGJlMWFrNzE5WkYwbTQ4ZHErNlJZNkdQajVhNkY0dz1cIixcIkV4cGlyZVRpbWVcIjpcIjIwMjEtMDctMTJUMTA6MTk6MThaXCIsXCJNZWRpYUlkXCI6XCJjNGRiOTMwNDE1MzU0YjRjYTljNzBjMjAzNTNkNTUzMFwiLFwiUGxheURvbWFpblwiOlwiaGVsZW4udmlkZW8uZ3VsaS5zaG9wXCIsXCJTaWduYXR1cmVcIjpcIlFtd0taMXFtb21IODFRdlNZcGVvNFo1NUJNMD1cIn0iLCJWaWRlb01ldGEiOnsiU3RhdHVzIjoiTm9ybWFsIiwiVmlkZW9JZCI6ImM0ZGI5MzA0MTUzNTRiNGNhOWM3MGMyMDM1M2Q1NTMwIiwiVGl0bGUiOiLnrKzkupTpm4Yt5Yqg5a+GIiwiQ292ZXJVUkwiOiJodHRwOi8vaGVsZW4udmlkZW8uZ3VsaS5zaG9wL2M0ZGI5MzA0MTUzNTRiNGNhOWM3MGMyMDM1M2Q1NTMwL3NuYXBzaG90cy81NGMzZWQ3N2U4NDM0ZjM3OWU3YjYzODQ4MTYwZTdiZi0wMDAwMi5qcGciLCJEdXJhdGlvbiI6MTkuNjJ9LCJBY2Nlc3NLZXlJZCI6IlNUUy5OVE5na3RCcUxoeXpBV05xY212YWFYUVJYIiwiUGxheURvbWFpbiI6ImhlbGVuLnZpZGVvLmd1bGkuc2hvcCIsIkFjY2Vzc0tleVNlY3JldCI6IkRSNkZZTE5uVjIxZERWWVhCNXU5RER2ZlRDaHNYdDRYVWs2NFFhbW1TNEFiIiwiUmVnaW9uIjoiY24tc2hhbmdoYWkiLCJDdXN0b21lcklkIjoxNTA2MjczMTY3NzcxMjAxfQ==',
            encryptType:1, //当播放私有加密流时需要设置。  
            components: [{
                name: 'BulletScreenComponent', // 跑马灯组件
                type: AliPlayerComponent.BulletScreenComponent,
                /** 跑马灯组件三个参数 text, style, bulletPosition
                 * text: 跑马灯文字内容
                 * style: 跑马灯样式
                 * bulletPosition: 跑马灯位置, 可选的值为 'top' (顶部), 'bottom' (底部), 'random' (随机), 不传值默认为 'random'
                 */
                args: ['欢迎来到谷粒学院', { fontSize: '16px', color: '#00c1de' }, 'random']
            },{ 
                // 弹幕
                name: 'AliplayerDanmuComponent', // 弹幕组件
                type: AliPlayerComponent.AliplayerDanmuComponent,
                args: [danmukuList] //列表：注意需要外层的[ ]
            },{
                // 旋转镜像
                name: 'RotateMirrorComponent',
                type: AliPlayerComponent.RotateMirrorComponent
            }] 
        },function(player){
            console.log('播放器创建好了。')
        });
    </script>
</body>
</html>